<!DOCTYPE html>
<html lang="en">
<head>
  #parse("head.html")
  <title>regist</title>
</head>
<body>
<div class="container">
	<div class="row">
		<div class="col-xs-offset-2">
			<h1>用户注册</h1>
		</div>
	</div>
	<div class="row" id="regist">
		<div class="col-md-6">
			<form class="form-horizontal">
				<div class="form-group">
					<label for="inputEmail3" class="col-sm-2 control-label">用户名</label>
					<div class="col-sm-10">
						<input id="username" type="text" class="form-control"  placeholder="用户名" name="username"
							   data-container="body" data-toggle="popover" data-placement="right" data-content="">
					</div>
				</div>
				<div class="form-group">
					<label for="inputPassword3" class="col-sm-2 control-label">密码</label>
					<div class="col-sm-10">
						<input id="password" type="password" class="form-control" placeholder="密码" name="password"
							   data-container="body" data-toggle="popover" data-placement="right" data-content=""/>
					</div>
				</div>
			</form>
        ##			此时的button需要放在form外面，不然会出现乱七八糟的bug
			<div class="form-group">
				<div class="col-sm-offset-2 col-sm-10">
					<button id="registBtn" class="btn btn-default">注册</button>
				</div>
			</div>
		</div>
	</div>
</div>
<script type="text/javascript">
    $(document).ready(function(){
		bindBlur() ;
		checkUsername() ;
		regist() ;
	}) ;
    //验证用户名是否已经存在
    function checkUsername(){
		$("#regist #username").on("blur",function(){
		    if(this.value.trim()!=''){
				$.ajax({
					url:"${WEB_PATH}/user/checkExist",
					data:"username="+this.value,
					type:"GET",
					success:function (result) {
						console.log(result) ;
						console.log(result.code==2) ;
						if(result.code==2){ //用户存在
							$("#regist #username").attr("data-content","用户名已经存在！") ;
							$('#username').popover('show') ;
							$("#registBtn").attr({"disabled":"disabled"}) ;
						}else if(result.code==1){
							$('#username').popover("hide") ;
							$("#registBtn").removeAttr("disabled") ;
						}
					}
				}) ;
			}else if(this.value.trim()==""){
				$(this).attr("data-content","内容不允许为空") ;
				$(this).popover('show') ;
				$("#registBtn").attr({"disabled":"disabled"})
			}
		}).on("click",function () {
			$("#regist #username").popover('hide') ;
		}) ;;
	}

	function bindBlur(){ //给所有的窗口绑定 失去焦点的事件,判断是否为null ;
		$('#regist #password').on("blur",function(e){
		   // console.log($(this).attr("data-content")) ;取得当前属性的内容
		    if(this.value.trim()==''){ //如果为空
				$("#regist #password").attr("data-content","密码不允许为空!") ;
				$("#regist #password").popover('show') ;
				$("#registBtn").attr({"disabled":"disabled"}) ;
			}else if(this.value.trim()!=""){
				$("#regist #password").popover('hide') ;
				$("#registBtn").removeAttr("disabled") ;
			}
		}).on("click",function () {
			$("#regist #password").popover('hide') ;
		}) ;
	}

	function regist(){
		$("#registBtn").on("click",function(){
			$.ajax({
				url:"${WEB_PATH}/user/regist" ,
				data:$("#regist form").serialize() ,
				type:"POST" ,
				success:function(data){
					if(data.code==1){ //保存成功
						alert("注册成功！") ;
						window.location="${WEB_PATH}/" ;
					}else if(data.code==2){
						alert("注册失败，请联系管理员!") ;
					}
				}
			}) ;
		}) ;
	}
</script>
</body>
</html>